<% include header %>
<div id="mainid">
<% include nav %>
<div class="text-center infoMessage">
    <!--提示信息的区域-->
    <% if(success){ %>
        <%= success %>
    <% }else{ %>
        <%= error %>
    <% } %>
</div>
<!--日历插件-->
<% include calendar %>
<% include clock %>
<% include menulist %>
<!--进行评论-->
<div class="panel-group">
    <!--如果用户登录了就不进行提示登录、注册-->
    <% if(!user){ %>
        <div class="alert alert-info" role="alert">
            发表评论之前请先
            <a href="/loginForm" class="alert-link">登录</a>
            或
            <a href="/regForm" class="alert-link">注册</a>
        </div>
        <form method="post">
            <textarea required name="commentText" class="form-control exampleText" rows="10" placeholder="请进行文明评论..."></textarea>
            <button type="submit" class="btn btn-primary btn-sm">提交</button>
            <button class="btn btn-default btn-sm callback">返回</button>
        </form>
        <hr class="hr">
    <% }else{ %>
        <div class="alert alert-success" role="alert">
            文章作者：
            <a href="#" class="alert-link faburen"><%= name %></a>
            文章标题：
            <a href="#" class="alert-link faburen"><%= articleTitle %></a>
            评论数量：
            <a class="alert-link"><%= total %></a>
            <a href="http://www.cpd.com.cn/n15737398/n26490099/c28592715/content.html" class="alert-link pull-right">《请自觉遵守--中国网民互联网评论协议》</a>
        </div>
        <!--form表单在js中默认是get请求，发送post时要写上-->
        <form method="post">
            <textarea name="commentText" class="form-control exampleText" rows="10" placeholder="请进行文明评论..."></textarea>
            <button type="submit" class="btn btn-primary btn-sm">提交</button>
            <button class="btn btn-default btn-sm callback">返回</button>
        </form>
        <hr class="hr">
    <% } %>
</div>
<!--未有评论-->
<% if(coms.length==0){ %>
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"></h3>
        </div>
        <div class="panel-body noneComment">
            暂无评论
        </div>
    </div>
</div>
<% }else{ %>
<!--显示评论-->
<div class="panel-group">
    <% coms.forEach(function (item,index) { %>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <%= item.username %>&#x3000;评论于&#x3000;<%= item.time.second %>

                    <!-- Button trigger modal -->
                    <a class="pull-right btn btn-default btn-xs reply" data-toggle="modal" data-target="#reply">
                        回复
                    </a>
                    <i class="pull-right glyphicon glyphicon-share-alt"></i>
                    <span class="replySize pull-right">当前回复数量：<%= item.reply.length %></span>
                    <!--如果评论的用户和当前登陆的用户一样就可以进行删除评论的操作-->
                    <!--item.username:发布评论的人   item.time.second：发布评论的时间-->
                    <% if(user.name==item.username){ %>
                        <a href="/remove/<%= item.username %>/<%= item.time.second %>" class="pull-right replySize">删除</a>
                    <% } %>
                    <!-- Modal -->
                    <div class="modal fade" id="reply" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">评论回复</h4>
                                </div>
                                <form action="/reply/<%= item.name %>/<%= item.title %>/<%= item.time.second %>" method="post">
                                    <div class="modal-body">
                                        <textarea name="replyContent" class="form-control replyBox" rows="3" placeholder="请输入回复语..."></textarea>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="submit" class="btn btn-success">保存</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </h3>
            </div>
            <div class="panel-body">
                <%- item.comment %>
                <!--实现降序排列-->
                <% for (var i=item.reply.length-1;i>=0;i--) { %>
                    <p>
                        <hr class="replyHr">
                        <h6 class="replyInfo"><%= item.replyPeople[i] %>&#x3000;于&#x3000;<%= item.replyTime[i] %>&#x3000;回复&#x3000;</h6>
                        <%= item.reply[i] %>
                    </p>

                <% } %>

            </div>
        </div>
        <!--因为评论里可能会有特殊字符，所以需要用‘-’而不是‘=’-->
    <% }) %>
    <!--分页显示-->
    <% include commentPage %>
</div>
<% } %>

</div>
<% include footer %>
<!--点击返回按钮回到上一个url页面-->
<script>
    $(function () {
        $('.callback').click(function (e) {
            //禁止提交表单
            e.preventDefault();
            location.href='/main';
        });
        //
        setTimeout(function () {
            $('.infoMessage').fadeOut();
        },2000)
    })
</script>